<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <title>首页</title>
    <meta charset="UTF-8">
	<meta name="keywords" content="">
	<meta name="description" id="description" content="">
	<meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1"/>
	<meta name="format-detection" content="telephone=no, email=no"/>
	<meta name="apple-touch-fullscreen" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta http-equiv="Expires" content="-1">
	<meta http-equiv="pragram" content="no-cache">
	<!--css-->
	<link rel="stylesheet" href="css/vant.css"/>
	<link rel="stylesheet" href="css/common.css"/>
	<link rel="stylesheet" href="css/style.css"/>
	<!--js-->
	<script src="js/jquery.min.js"></script>
	<script src="js/md5.min.js"></script>
	<script src="js/flexible.js"></script>
	<script src="js/vue.min.js"></script>
	<script src="js/vant.min.js"></script>
	<script src="js/verify.js"></script>
	<script src="js/wxtool.js?v=4"></script>
</head>
<body>
<!--http://zp-www.t.hnic.com.cn/phoneBindWechat/-->
	<div class="wrap Index" id="app">
	    <div class="container">
			<div class="logo"><img src="images/logo.png" alt=""></div>
			<div class="title">{{wxUser.nickname}}，您好！</div><!--绑定黄河人才网微信公众号-->
			<div class="dsc">绑定微信公众号，随时获取应聘进度微信通知</div>
			<div class="form">
				<div class="row"><input type="tel" maxlength="11" v-model="phone" placeholder="请输入手机号"></div>
				<div class="row"><div class="verify-wrap" id="verify-wrap"></div></div>
				<div class="row"><input type="tel" maxlength="6" v-model="code" placeholder="请输入验证码"><button class="btnCode" :disabled="disabledFlag" @click="getCode">{{codeName}}</button></div>
				<div class="btn"  @click="bind">绑定</div>
			</div>
		</div><!--container-->
	</div><!--wrap-->
	<script>
        var basePath = '/prod-api/'
		if(window.location.host.indexOf('127.0.0.1')>=0||window.location.host.indexOf('192.168.')>=0||window.location.host.indexOf('localhost')>=0){
			basePath = 'http://zp-www.t.hnic.com.cn/prod-api/'
			basePath = 'http://127.0.0.1:7777'
			console.log('当前属于测试模式'+'=>>>>>>>>>>>>>>>>>>>>>basePath>>>>'+basePath);


		}
        var app = new Vue({
            el: '#app',
            data: {
				phone:'',//手机号
				code:'',//验证码
				verifyFlag:false,//验证标识
                codeName:'获取验证码',
				disabledFlag: false,//获取验证码能否点击
				time: 60,

				wxUser:{
					"authflag": "1",
						"city": "郑州",
						"country": "中国",
						"groupid": 0,
						"headimgurl": "",
						"language": "zh_CN",
						"latitude": 0,
						"longitude": 0,
						"nickname": "测试",
						"openid": "",//关键信息
						"precision": 0,
						"privilege": [],
						"province": "河南",
						"remark": "",
						"remarkname": "",
						"sex": 1,
						"subscribe": 1,
						"subscribeTime": "2017-06-28 18:26:24",
						"subscribe_time": 1498645584,
						"tagid_list": [],
						"unionid": ""//关键信息
				},


            },
            //方法
            methods: {
				//手机号正则验证
                phoneReg:function(v){
                    var mobile = /^1(3|4|5|6|7|8|9)\d{9}$/;
                    if(mobile.test(v)){
                        return true;
                    }else{
                        return false;
                    }
                },


				//绑定用户
				bind(){
					let that = this
					if(!that.phoneReg(that.phone)){
						vant.Toast('请输入正确的手机号');
						return false;
					}
					if(!that.verifyFlag){
						console.log(that.verifyFlag)
						vant.Toast('请向右滑动滑块进行验证');
						return false;
					}
					if(!that.verifyFlag){
						console.log(that.verifyFlag)
						vant.Toast('请向右滑动滑块进行验证');
						return false;
					}
					if(null==that.wxUser){
						vant.Toast('请先在微信下授权');
						return false;
					}
					if(null==that.wxUser.unionid||''==that.wxUser.unionid){
						vant.Toast('微信授权失败，未获取unionid');
						return false;
					}
					if(null==that.wxUser.openid||''==that.wxUser.openid){
						vant.Toast('微信授权失败，未获取unionid');
						return false;
					}

					$.ajax({
						type:"POST",
						contentType:'application/json;charset=utf-8',
						dataType:"json",
						url:basePath + "/person/code/v1/reg.thtml?r="+Math.random(),
						data:JSON.stringify({
							"phone":that.phone,
							"smsCode":that.code,
							"thirdType":'wx.oa',
							"unionid":that.wxUser.unionid,
							"secondId":that.wxUser.openid
						}),
						success:function(res){
							console.log(res)
							if(res.code==200){
							  // vant.Toast('绑定成功， 您可以通过公众号收到消息提醒了');
								window.location.replace("success.html")
							}else{
								vant.Toast(res.message);
							}
						}
					});
				},


                //获取验证码
				getCode(){
					let that = this
					if(!that.phoneReg(that.phone)){
                        vant.Toast('请输入正确的手机号');
                        return false;
					}
					if(!that.verifyFlag){
						console.log(that.verifyFlag)
                        vant.Toast('请向右滑动滑块进行验证');
                        return false;
					}

					$.ajax({
                        type:"POST",
                        contentType:'application/json;charset=utf-8',
                        dataType:"json",
                        url:basePath + "/person/sms/create_token.thtml",
                        data:JSON.stringify({
                            "phone":that.phone,
                        }),
                        success:function(res){
                            console.log(res)
                            if(res.code==200){
                                var token = res.result.token
								let sign = md5(token+that.phone+'EmxJk0VFBgtPfCU5XtZxiVk6rkIGBLwY')
                                //获取验证码
								$.ajax({
									type:"POST",
									contentType:'application/json;charset=utf-8',
									dataType:"json",
									url:basePath + "/person/sms/send",
									data:JSON.stringify({
										"mobile":that.phone,
										 "sign":sign,
										"token":token,
									}),
									success:function(res){
										console.log(res)
										if(res.code==200){
											vant.Toast('验证码发送成功');
											that.disabledFlag = true
											let interval = window.setInterval(function() {
												that.codeName = '已发送' + that.time + 's';
												--that.time;
												if(that.time < 0) {
													that.codeName = "重新发送";
													that.time = 60;
													that.disabledFlag = false;
													window.clearInterval(interval);
												}
											}, 1000);
										}else{
											vant.Toast(res.message);
										}
									}
								});
                            }else{
                                vant.Toast(res.message);
                            }
                        }
                    });
				},
            },
            //生命周期 - 创建完成（可以访问当前this实例）
            created() {
				_wxtool.auth2()
				this.wxUser=_wxtool.getUser();
				console.log(this.wxUser.nickname)
            },
            //生命周期 - 挂载完成（可以访问DOM元素）
            mounted() {

				var that = this
                var SlideVerifyPlug = window.slideVerifyPlug;
				var slideVerify = new SlideVerifyPlug('#verify-wrap',{
					wrapWidth:'',//设置 容器的宽度 ,不设置的话，会设置成100%，需要自己在外层包层div,设置宽度，这是为了适应方便点；
					initText:'请向右滑动滑块',  //设置  初始的 显示文字
					sucessText:'验证通过',//设置 验证通过 显示的文字
					getSuccessState:function(res){
						//当验证完成的时候 会 返回 res 值 true，只留了这个应该够用了
						that.verifyFlag = res
						console.log('verifyFlag= ' + that.verifyFlag)
					}
				});
            }
        })
    </script>
</body>
</html>
